<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="fa()">我要发帖</span></header>
    <section>
        <ul>
            <li>
                <div>
                    <img src="./images/tou01.jpg" alt="">
                </div>
                <h1>如何学习web前端开发</h1>
                <p>
                    板块:新手报到
                    <span>发表时间:2024-04-23</span>
                </p>
            </li>


        </ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" onclick="publish()" value="发布">
    </div>
</div>
<script>
    function fa(){
        var post_ = document.getElementsByClassName("post")[0];
        post_.style.display = "block"; // 显示发帖框
        // 所有发帖框中的文本清空
        document.getElementsByClassName("title")[0].value = "";
        document.getElementsByTagName("select")[0].value = 0; // 针对下拉列表 
        document.getElementsByClassName("content")[0].value = "";
    }
    // 头像数组定义
    var touxiang = new Array();
    touxiang[0] = "tou01.jpg";
    touxiang[1] = "tou02.jpg";
    touxiang[2] = "tou03.jpg";
    touxiang[3] = "tou04.jpg";
    function publish(){
        // 获取一个随机头像
        var num = Math.floor(Math.random()*4);
        var tx = touxiang[num]; // 随机头像
        // 获取帖子的标题和分类
        var title = document.getElementsByClassName("title")[0].value;
        var category = document.getElementsByTagName("select")[0].value;

        // 系统时间
        var date = new Date();

        // 构建节点 
        var el_div = document.createElement("div");

        // 创建img 节点
        var el_img = document.createElement("img");
        el_img.setAttribute("src","./images/"+tx);

        el_div.appendChild(el_img); // 将图片节点追加到div中


        // 创建标题节点
        var el_title = document.createElement("h1");
        el_title.innerHTML = title;

        // 创建段落节点
        var el_category = document.createElement("p");
        el_category.innerHTML = "板块:"+category;

        // 创建段落中时间节点
        var el_date = document.createElement("span");
        el_date.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;发表时间:"+date.toLocaleString(); // 格式化时间函数

        el_category.appendChild(el_date);


        // 创建li节点
        var el_li = document.createElement("li");
        // 追加div
        el_li.appendChild(el_div);
        // 追加标题
        el_li.appendChild(el_title);
        // 追加段落
        el_li.appendChild(el_category);


        // 往末尾追加
        // document.getElementsByTagName("ul")[0].appendChild(el_li);

        // 前置追加，最新的帖子显示在最上面
        // 1、获取当前列表的第一个li节点
        var el_li_first = document.getElementsByTagName("ul")[0].firstElementChild;
        // 2、使用insertBefore 插入节点
        document.getElementsByTagName("ul")[0].insertBefore(el_li,el_li_first);

        var post_ = document.getElementsByClassName("post")[0];
        post_.style.display = "none"; // 隐藏发帖框

    }



</script>
</body>
</html>